<template>
  <div class="adjustProject">
    <div class="left">
      <div class="leftTitle">
        项目统筹安排
      </div>
    </div>
    <div class="right">
      <div class="selectNode">
        <div v-for="(item, index) in projectNode" :key="index" class="nodeItem" @click="changeIndex(index)">
          <div :class="activeIndex == index?'itemText_active':'itemText'">
            {{item}}
          </div>
        </div>
      </div>
      <div class="hint">
        须指派相关调研人员,评估项目是否可行
      </div>
      <div class="time">
        <div class="project">
          <div class="title">项目周期</div>
          <div class="project_content">2019/12/30~2020/06/31</div>
        </div>
        <div class="node">
          <div class="title">节点周期</div>
          <div class="node_content">2019/12/30~2020/06/31</div>
        </div>
        <div class="unit">
          <div class="title">视图单位</div>
          <div class="unit_content">
            <div class="unit_content_change" @click="selectTime">
              <label><input type="radio" value="天" name="selectTime" checked>天</label>
              <label><input type="radio" value="周" name="selectTime">周</label>
              <label><input type="radio" value="月" name="selectTime">月</label>
            </div>
            <div>
              <label><input type="checkbox">剔除节假日</label>
            </div>
          </div>
        </div>
        <div class="member">
          <table border="1">
            <tr>
              <th>角色</th>
              <th>成员</th>
              <td>
                <select style="border:0;outline:none;appearance:none" @click.self="memberSelect">
                  <option value ="into">投入</option>
                  <option value ="way">方式</option>
                </select>
              </td>
              <td>开始</td>
              <td>结束</td>
              <td>累计投入</td>
              <td>10.3</td>
              <td>10.3</td>
              <td>10.3</td>
              <td>10.3</td>
              <td>10.3</td>
              <td>10.3</td>
              <td>10.3</td>
            </tr>
            <tr>
              <td colspan="2" v-show="!isShow" @click="dialogTableVisible = true"></td>
              <td class="role" v-show="isShow" @click="shangeIsShow"></td>
              <td class="member" v-show="isShow" @click="shangeIsShow"></td>
              <td>
                <select style="border:0;outline:none;appearance:none">
                  <option value ="into">投入</option>
                  <option value ="way">方式</option>
                </select>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div>
      <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="date" label="日期" width="150"></el-table-column>
          <el-table-column property="name" label="姓名" width="200"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        projectNode:['虚拟项目','正式立项','开发完结','正式交付','项目完结'],
        activeIndex:0,
        radio:'1',
        isShow:false,
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible:false
      }
    },
    methods:{
      changeIndex(index){
        this.activeIndex = index
        // console.log(this.activeIndex)
      },
      selectTime(){
        // console.log('aaa')
      },
      memberSelect(){
        // console.log(event.target.value)
      },
      shangeIsShow(){
        this.isShow = !this.isShow
      }
    }
  }
</script>

<style lang="scss" scoped>
.adjustProject{
  width: 98%;
  margin: 30px 1%;
  display: flex;
  font-size: 13px;
  .left{
    width: 100px;
    .leftTitle{
      border-left: 5px solid #d7d7d7;
      padding-left: 5px;
    }
  }
  .right{
    flex: 1;
    .selectNode{
      display: flex;
      margin-left: 100px;
      .nodeItem{
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .itemText{
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          margin-right: 15px;
          padding: 0 5px 0 5px;
          border: 1px solid black;
          border-radius: 1px;
          background: #ffffff;
        }
        .itemText:before{
          content:"";
          border:14px solid black;
          border-top-color:transparent;
          border-right-color:transparent;
          border-bottom-color:transparent;
          width:0px;
          height:0px;
          position:absolute;
          right: -29px;
        }
        .itemText:after{
          content:"";
          border:14px solid #ffffff;
          border-top-color:transparent;
          border-right-color:transparent;
          border-bottom-color:transparent;
          width:0px;
          height:0px;
          position:absolute;
          right: -28px;
        }
        .itemText_active{
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          margin-right: 15px;
          padding: 0 5px 0 5px;
          border: 1px solid black;
          border-radius: 1px;
          background: #d7d7d7;
        }
        .itemText_active:before{
          content:"";
          border:14px solid black;
          border-top-color:transparent;
          border-right-color:transparent;
          border-bottom-color:transparent;
          width:0px;
          height:0px;
          position:absolute;
          right: -29px;
        }
        .itemText_active:after{
          content:"";
          border:14px solid #d7d7d7;
          border-top-color:transparent;
          border-right-color:transparent;
          border-bottom-color:transparent;
          width:0px;
          height:0px;
          position:absolute;
          right: -28px;
        }
      }
    }
    .hint{
      padding: 10px;
      margin-left: 100px;
    }
    .time{
      div{
        display: flex;
        align-items: center;
        margin: 10px 0;
      }
      .title{
        margin: 0 20px;
      }
      .unit{
        label{
          display: flex;
          align-items: center;
          font-weight: 500;
        }
        input{
          margin-left: 10px;
          margin-right: 5px;
          width: 10px;
        }
        .unit_content{
          width: 60%;
          display: flex;
          justify-content: space-between;
          margin: 0;
        }
      }
    }
  }
}
</style>
